<template>
    <div class="room-item">
        <span class="status">{{status}}</span>
        <img :src="state.room.cover" />
        <div class="room-main">
            <div class="base">
                <p class="number">房间号: <span>{{state.room.roomNumber}}</span></p>
                <p class="number">楼层: <span>{{state.room.floor}}</span></p>
            </div>
            <p class="desc">{{state.room.description}}</p>
            <p class="price"><i>￥</i>{{state.room.price}}</p>
        </div>
    </div>
</template>
<script>
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
export default {
    name: "roomItem",
    props: {
        data: {
            required: true,
            type: Object
        }
    },
    setup(props){
        const state = reactive({
            room: props.data
        })
        const store = useStore();
        const status = computed(() => {
            return store.state.room.status.find(item => item.status === state.room.status).name
        })
        return {
            state,
            status
        }
    }
}
</script>

<style lang="scss" scoped>
.room-item{
    width: 100%;
    height: 100%;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid $adminBg;
    border-radius: 5px;
    transition: all ease .5s;
    position: relative;
    .status{
        position: absolute;
        top: 10px;
        right: 10px;
        background: $greenColor;
        color: #fff;
        line-height: 18px;
        padding: 0 10px;
        font-size: 14px;
    }
    &:hover{
        box-shadow: 2px 2px 10px $shadowColor;
    }
    img{
        width: 100%;
        height: 200px;
    }
    .room-main{
        margin-top: 5px;
        .base{
            display: flex;
            justify-content: space-between;
            p{
                font-size: 14px;
                color: $titleColor;
                line-height: 22px;
                span{
                    margin-left: 10px;
                }
            }
        }
        .desc{
            line-height: 22px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        .price{
            text-align: right;
            font-size: 14px;
            color: $redColor;
            i{
                font-size: 12px;
                font-weight: 600;
            }
        }
    }
}
</style>